<template>
  <el-dialog width="1200px" :title="$t('m.initInventory.detail')" :visible.sync="dialogVisible" :before-close="close">
    <!-- tool start -->
    <el-form size="mini" label-width="120px">
      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('m.initInventory.stocktakecode')">
            <el-input maxlength="20" show-word-limit v-model="detail.initialstocktakecode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.inventory.type')">
            <el-input maxlength="20" show-word-limit v-model="inventoryStockType" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.inventory.method')">
            <el-input maxlength="20" show-word-limit v-model="inventoryStockWay" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.inventory.person')">
            <el-input maxlength="20" show-word-limit v-model="detail.stockuser" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.inventory.date')">
            <el-input maxlength="20" show-word-limit v-model="confirmtimeComputed" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.inventory.result')">
            <el-input maxlength="20" show-word-limit v-model="stockResult" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="detail.stocktype===4" :span="8">
          <el-form-item :label="$t('m.inventory.warningstock')">
            <el-input v-model="detail.condition" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="detail.stocktype===5" :span="8">
          <el-form-item :label="$t('m.inventory.storageAge')">
            <el-input v-model="detail.condition" disabled></el-input>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <!-- tool end -->
    <el-divider>{{$t('m.initInventory.detail')}}</el-divider>
    <!-- table数据展示 start -->
    <template v-if="detail.stocktype===1">
      <skuTable :detail="detail.initialStockTakeDetailOutputList"></skuTable>
    </template>
    <template v-if="detail.stocktype===2">
      <locationTable :detail="detail.initialStockTakeDetailOutputList"></locationTable>
    </template>
    <template v-if="detail.stocktype===3">
      <collisionTable :detail="detail.initialStockTakeDetailOutputList"></collisionTable>
    </template>
    <template v-if="detail.stocktype===4">
      <warningTable :detail="detail.initialStockTakeDetailOutputList"></warningTable>
    </template>
    <template v-if="detail.stocktype===5">
      <ageTable :detail="detail.initialStockTakeDetailOutputList"></ageTable>
    </template>
    <!-- table数据展示 end -->
    <el-row>
      <el-button @click="close">{{$t('m.close')}}</el-button>
    </el-row>
  </el-dialog>
</template>
<script>
import common from '@/utils/common'
export default {
  name:'inventory-details-popup',
  props:['dialogVisible','detail','stockOptions'],
  data(){
    return {
      formInline:{
        collisionDate:[] // 动碰时间段
      },
      pickerOptions:{ // 限制日期范围在今天之前
        disabledDate(time){
          return time.getTime() > new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1 // 获取今天23：59：59的时间戳
        }
      }
    }
  },
  computed:{
    inventoryStockType(){
      return this.stockOptions[0].find((item)=>{
        return item.value === this.detail.stocktype
      }).label
    },
    inventoryStockWay(){
      return this.stockOptions[1].find((item)=>{
        return item.value === this.detail.stockway
      }).label
    },
    confirmtimeComputed:{
      get(){
        return common.timestampToTime(this.detail.stocktime)
      }
    },
    stockResult(){
      return this.detail.stockresult===1?this.$t('m.inventory.normal'):(this.detail.stockresult===2?
        this.$t('m.inventory.different'):this.$t('m.inventory.noresult'))
    },
    datetimerange(){
      let [createdatestart, createdateend] = this.formInline.collisionDate || Array.from(2)
      return {
        createdatestart, //动碰时间段--start
        createdateend //动碰时间段--end
      }
    }
  },
  mounted(){
  },

  components:{
    // 这块用组件懒加载
    skuTable:()=>import('./details-sku-table'), // sku盘点组件
    locationTable:()=>import('./details-location-table'), // 库位盘点组件
    collisionTable:()=>import('./details-location-table'), // 动碰盘点组件
    warningTable:()=>import('./details-warning-table'), //预警库存盘点
    ageTable:()=>import('./details-age-table') //库龄盘点
  },
  methods:{
    close(){
      this.$emit('close')
    }
  }
}
</script>
<style lang="scss" scoped>
.el-divider__text{font-size: 18px;}
</style>